<!--
 * @Author: byron
 * @Date: 2021-09-23 20:48:37
 * @LastEditTime: 2021-10-07 09:07:25
-->
<template>
    <div class="playlists">
        <div class="top-play-card-warp">
            <TopCard
                :desc="topPlaylist.description"
                :id="topPlaylist.id"
                :img="topPlaylist.coverImgUrl"
                :name="topPlaylist.name"
            />
        </div>
        <div class="tabs-warp">
            <Tabs
                :tabs="tabs"
                offset="right"
                @tabChange="onTabChange"
                v-model="activeTabIndex"
            />
        </div>
        <div class="play-card-warp">
            <PlaylistCard
                v-for="(item, index) in playlists"
                :key="index"
                :img="item.coverImgUrl"
                :desc="item.playCount"
                :name="item.name"
                :id="item.id"
            />
        </div>
    </div>
</template>

<script>
import TopCard from './top-card.vue'
import { getPlaylists, getTopPlaylists } from '@/api'
import { getPageOffset } from '@/utils'

const PAGE_SIZE = 50
export default {
    components: {
        TopCard,
    },
    props: {},
    data() {
        return {
            activeTabIndex: 0,
            playlists: [],
            currentPage: 0,
            total: 0,
            topPlaylist: {},
        }
    },
    watch: {},
    computed: {},
    methods: {
        async initData() {
            this.getPlaylists()
            this.getTopPlaylists()
        },
        async getPlaylists() {
            const { playlists, total } = await getPlaylists({
                limit: PAGE_SIZE,
                offset: getPageOffset(this.currentPage, PAGE_SIZE),
                cat: this.tabs[this.activeTabIndex],
            })
            this.playlists = playlists
            this.total = total
        },
        async getTopPlaylists() {
            const { playlists } = await getTopPlaylists({
                limit: 1,
                cat: this.tabs[this.activeTabIndex],
            })
            this.topPlaylist = playlists[0] || {}
        },
        onTabChange() {
            this.currentPage = this.activeTabIndex + 1
            this.initData()
        },
    },
    async created() {
        this.PAGE_SIZE = PAGE_SIZE
        this.tabs = [
            '全部',
            '欧美',
            '华语',
            '流行',
            '说唱',
            '摇滚',
            '民谣',
            '电子',
            '轻音乐',
            '影视原声',
            'ACG',
            '怀旧',
            '治愈',
            '旅行',
        ]
        this.initData()
    },
    mounted() {},
}
</script>
<style lang="less" scoped>
.top-play-card-warp {
    margin-bottom: 16px;
}

.play-card-warp {
    display: flex;
    flex-wrap: wrap;
}
</style>
